<template>
	<div class="comment-container">
		<h3>发表评论</h3>

		<hr>

		<textarea placeholder="请输入内容，不得超过120字" maxlength="120" v-model="msg"></textarea>

		<mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
		<!-- 评论内容 -->
		 <div class="cmt-list">
		 	<div class="cmt-item" v-for="(item, i) in comment" :key="item.url">
		 		<div class="cmt-title">
		 			第{{ i+1 }}楼&nbsp;&nbsp;用户:{{ item.user_name }}&nbsp;&nbsp;发表时间:{{ item.add_time }}
		 		</div>
		 		<div class="cmt-body">
		 			{{ item.content === 'undefined' ? '此用户很懒，什么都没说': item.content }}
		 		</div>
		 	</div>
		 </div>

		<mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	export default {
		data() {
			return {
				pageindex: 1,
				comment: [],
				msg: ''
			}
		},
		created() {
			this.getComments();
		},
		methods: {
			getComments() { //获取评论内容
				this.$http.get("api/getcomments/" + this.id + "?pageindex=" + this.pageindex).then(result => {
					if (result.body.status === 0) {
						// this.comment = result.body.message
						this.comment = this.comment.concat(result.body.message)
					} else {
						Toast('111111')
					}
				})
			},
			getMore() { //加载更多
				this.pageindex++;
				this.getComments()
			},
			postComment() {  //	发表评论
				if (this.msg.trim().length === 0) {
					return Toast('评论内容不能为空')
				}



				this.$http.post('api/postcomment/' + this.$route.params.id, {content: this.msg.trim() }).then(result => {
					if (result.body.status === 0) {
						//在发表之前校验是否有内容
						//拼接一个内容
						var cmt = {
							user_name: "匿名用户",
							user_time:  Date.now(),
							content: this.msg.trim()
						}
						this.comment.unshift(cmt)
						this.msg = ''
					} else {
						Toast('评论错误')
					}
				})

			}
		},
		// 子组件向父组件拿值
		props: ['id']
	}
	
</script>

<style lang="scss" scoped>
	.comment-container {
		h3 {
			font-size: 16px;
		}
		textarea {
			font-size: 14px;
			height: 85px;
			margin: 0;
		}
		.cmt-list {
			margin: 5px 0;
			.cmt-item {
				font-size: 13px;
				.cmt-title {
					background: #ccc;
					line-height: 30px;
				}
				.cmt-body {
					line-height: 30px;
					text-indent: 2em;
				}
			}
		}
	}

</style>